<template>
  <div>
    <Header />
    <div class="back">
      <div class="container">
        <Nested :list='nestedList' />
        <div class="default-box">
          <div class="box-title">
            <div class="vertical-line vertical-line-black" />
            <span class="title-span">大学对比</span>
          </div>
          <div class="table-column content">
            <div class="table-colum-list">
              <div class="colum-title colum">大学信息
              </div>
            </div>
            <div class="table-colum-list" v-for="(item) in universityList" :key="item.id">
              <div class="colum-university colum" v-if="item.id"><img :src="item.logo" :alt="item.name">
                <div>{{ item.name }}</div>
              </div>
              <div class="colum-input colum" v-else>
                <SearchInput placeholder="搜索院校名称" @selectOption="select" />
              </div>
            </div>
          </div>
          <div class="flex content">
            <div>录取数据对比</div>
            <div class="flex selectList">
              <Select class="select" v-model="provincesRef" :options="setInputSelection(provinces)" />
              <Select class="select" v-model="subject2Ref" :options="setInputSelection(subject2)"  />
              <Select class="select" v-model="schoolYearRef" :options="setInputSelection(schoolYear)" />
            </div>
          </div>
          <ColumTable :titleList="compareTitle" :data="data" />
          <div class="content">院校信息</div>
          <ColumTable :titleList="properties" :data="data" />
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script lang="ts" setup>
import Header from '@/components/header/index.vue'
import Nested from '@/components/nested/index.vue'
import Footer from '@/components/footer/index.vue'
import ColumTable from '@/components/columTable/index.vue'
import SearchInput from '@/components/searchInput/index.vue'
import { ref } from 'vue'
import { NestedType } from '@/components/nested/nested';
import { compareTitle,properties } from './data'
import { Select } from 'ant-design-vue'
import { provinces,subject2,schoolYear,setInputSelection } from '@/components/universityNavList/data'

const nestedList = ref<NestedType[]>([{ name: '首页', path: '/' }, { name: '大学对比', path: '/universityCompare' }])

const data = ['1', '2', '3', '4']
const provincesRef = ref('')
const subject2Ref = ref('')
const schoolYearRef = ref('')
const universityList = ref<any>([{ id: '1', name: '北京大学', logo: '/images/universityLogo.png' }, { id: '2', name: '清华大学', logo: '/images/universityLogo.png' }, {}, {}])
const select = (item: any) => {
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>
